<template>
  <div class="album-le">
    <!-- 第一快 头部图片 -->
    <div class="album-top">
      <!-- 左边 -->
      <div class="album-left">
        <img :src="albums.blurPicUrl" alt="" />
        <span></span>
      </div>
      <!-- 右边 -->
      <div class="album-right">
        <div class="album-right-top1">
          <i></i>
          <span>{{ albums.name}}</span>
        </div>

        <div class="album-right-top2">
          歌手:
          <a @click="goartist(albums.artists[0].id)">{{ albums.artists ? albums.artists[0].name : "" }}</a>
        </div>
        <div class="album-right-top3">
          发布时间:
          <span>{{ moment(albums.publishTime).format("YYYY-MM-DD") }}</span>
        </div>
        <div class="album-right-top3">
          发布公司:
          <span> {{ albums.company }}</span>
        </div>

        <!-- 六个图标 -->
        <div class="icon">
          <a href="JavaScript:;" class="btn-i bg" @click="addSongList"
            ><i>播放</i></a
          >
          <a href="JavaScript:;" class="btn-ii bg"></a>
          <a href="JavaScript:;" class="btn-iii bg u-btn-i">
            <!-- parseInt(topList.subscribedCount / 10000) -->
            <i class="bg u-btn">收藏</i></a
          >
          <a href="JavaScript:;" class="btn-iiii bg u-btn-i">
            <i class="bg u-btn">{{
              albums.info ? albums.info.shareCount : ""
            }}</i></a
          >
          <a href="JavaScript:;" class="btn-iiiii bg u-btn-i">
            <i class="bg u-btn">下载</i></a
          >
          <a href="JavaScript:;" class="btn-iiiiii bg">
            <i class="bg"
              >(<span>{{ albums.info ? albums.info.commentCount : "" }}</span
              >)</i
            ></a
          >
        </div>
      </div>
    </div>

    <!-- 第二快 专辑详情 -->
    <div class="album-tow">
      <span>专辑介绍：</span>
      <div class="lyric" ref="ulric">
        <p v-for="(description, index) in description" :key="index">
          {{ description }}
        </p>
      </div>
      <div @click="changelyrics">
        <a style="color: rgb(41, 23, 178)">{{ islyrics ? "展开" : "收起" }}</a>
      </div>
    </div>

    <!-- 第三大块 -->
    <!-- 歌曲列表 -->
    <div class="pl-btn">
      <div class="pl-btn-top">
        <span class="pl-btn-t"
          >包含歌曲列表
          <p>{{ songs != null ? songs.length : 0 }}首歌</p></span
        >
        <div class="pl-btn-r">
          <a>生成外链播放器</a>
        </div>
      </div>
      <!-- 表格 -->
      <div class="m-table">
        <div class="w2"></div>
        <div class="w2">
          <span>歌词标签</span>
        </div>
        <div class="w2">
          <span>时长</span>
        </div>
        <div class="w2">
          <span>歌手</span>
        </div>
      </div>
      <!-- 文字 -->
      <Medley :songs="songs" />
    </div>
    <!-- 第四快 评论区 -->
    <Review :musicAreasList="musicAreasList" />

    <!-- 第五大块 -->
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="musicAreasList.total / 2"
      @current-change="changepage"
    >
    </el-pagination>
  </div>
</template>

<script>
import moment from "moment";
import Review from "@/components/Review";
import { mapState, mapGetters } from "vuex";
export default {
  components: {
    Review,
  },
  name: "LeftAlbumPage",
  data() {
    return {
      id: this.$route.query.id,
      moment,
      musicAreasList: [],
      islyrics: true,
      //   判断后的
      isalbums: {},
      //  显示多少条
      limit: 20,
      //   页码
      limitIndex: 0,
    };
  },
  mounted() {
    this.getAlbumList();
    this.getCommentAlbumList();
  },
  methods: {
    // 添加到歌单
    addSongList() {
      // 修改值达到同步
      this.$store.commit("ADDTRACKALL", this.songs);
      localStorage.removeItem("playlist");
      localStorage.setItem("playlist", JSON.stringify(this.songs));
      this.$bus.$emit("changeOne");
    },

    getAlbumList() {
      this.$store.dispatch("getAlbumList", this.id);
    },

    /* 必选参数 : id: 专辑 id   api reqCommentAlbumList
    可选参数 : limit: 取出评论数量 , 默认为 20
    offset: 偏移数量 , 用于分页 , 如 :( 评论页数 -1)*20, 其中 20 为 limit 的值
    before: 分页参数,取上一页最后一项的 time 获取下一页数据(获取超过 5000 条评论的时候需要用到) */
    async getCommentAlbumList() {
      const data = {
        id: this.id,
        limit: this.limit,
        // 条数乘以分页数
        offset: this.limit * this.limitIndex,
      };
      const result = await this.$API.reqCommentAlbumList(data);
      //   console.log(result);
      if (result.code == 200) {
        this.musicAreasList = result || {};
        this.total = result.total || undefined;
      } else {
        alert("获取专辑评论区失败");
      }
    },

    // 改变展开或者收起
    changelyrics() {
      if (this.islyrics) {
        this.islyrics = false;
        this.$refs.ulric.className = "lyrics";
      } else {
        this.islyrics = true;
        this.$refs.ulric.className = "lyric";
      }
    },
    changepage(index) {
      // console.log(index)
      this.limitIndex = index - 1;
      this.getCommentAlbumList();
    },
    // 跳转歌手
    goartist(id) {
      this.$router.push(`/artist?id=${id}`);
      // console.log(id)
    },
  },
  computed: {
    ...mapState({
      albums: (state) => {
        return state.Albumpage.albumLists.album || {};
      },
      songs: (state) => {
        return state.Albumpage.albumLists.songs || [];
      },
      ...mapGetters(["description"]),
    }),
  },
};
</script>

<style lang="less" scoped>
.album-le {
  width: 640px;
  margin: 50px auto;
  .album-top {
    display: flex;
    .album-left {
      position: relative;
      img {
        width: 177px;
        height: 177px;
      }
      span {
        position: absolute;
        left: 0;
        width: 209px;
        height: 177px;
        background-position: 0 -986px;
        background-image: url("~@/assets/image/coverall.png");
      }
    }
    .album-right {
      margin-left: 50px;
      // padding-right: 10px;
      .album-right-top1 {
        display: flex;
        align-items: center;
        i {
          display: inline-block;
          width: 54px;
          height: 24px;
          background-position: 0 -186px;
          background-image: url("~@/assets/image/icon.png");
        }
        span {
          display: inline-block;
          margin-left: 10px;
          font-size: 22px;
          line-height: 24px;
        }
      }
      .album-right-top2 {
        margin-top: 10px;
        font-size: 12px;
        color: #666666;
        a {
          display: inline;
          margin-left: 5px;
          color: #0c73ce;
        }
      }
      .album-right-top3 {
        margin-top: 10px;
        font-size: 12px;
        display: flex;
        align-items: center;
        color: #666666;
        span {
          margin-left: 5px;
        }
      }
    }
  }
  //   第二快
  .album-tow {
    margin-top: 10px;
    font-size: 12px;
    sapn {
      font-weight: bold;
    }
    p {
      line-height: 30px;
      text-indent: 2em;
      color: #666666;
      word-wrap: break-word;
      word-break: break-word;
      white-space: normal;
    }
  }
  //   第三快
  .pl-btn {
    // 歌词列表
    .pl-btn-top {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2px red;
      padding-bottom: 5px;
      .pl-btn-t {
        font-size: 20px;
        display: flex;
        align-items: flex-end;
        p {
          display: inline;
          margin-left: 10px;
          font-size: 12px;
        }
      }

      .pl-btn-r {
        display: flex;
        align-items: flex-end;

        a {
          color: #4996d1;
          font-size: 12px;
        }
        .btn-tp {
          color: #666;
          margin-left: 20px;
          display: flex;
          font-size: 12px;
          p {
            color: #c20c0c;
            font-weight: bold;
            display: block;
          }
        }
      }
    }
    // 表格
    .m-table {
      width: 100%;
      display: grid;
      // grid-template-columns :repeat(auto-fill,);
      height: 35px;
      background-color: rgb(248, 248, 248);
      // grid布局
      grid-template-columns: 74px auto 111px 20%;
      border: solid 1px rgb(216, 216, 216);
      .w2 {
        // border: solid 1px rgb(216, 216, 216);
        border-right: 1px solid rgb(216, 216, 216);
        span {
          font-size: 12px;
          color: #666;
          display: inline;
          margin-left: 5px;
        }
      }
      .s1 {
        border-right: none;
      }
    }
  }
}

// 显示隐藏
// 显示全部
.lyrics {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 显示十条
.lyric {
  margin-top: 10px;

  font-size: 12px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// 图标背景
.bg {
  background-image: url("~@/assets/image/button2.png");
}
// 六个icon
.icon {
  margin-top: 15px;
  display: flex;
  height: 40px;
  align-items: center;
  a {
    color: #000;
  }
  .btn-i {
    display: inline-block;
    width: 66px;
    height: 31px;
    // background-position: right -428px;
    background-position: 0 -387px;
    text-align: end;
    i {
      margin-right: 5px;
      // margin-top: 10px
      line-height: 28px;
      color: #fff;
      font-style: normal;
    }
  }
  .btn-ii {
    display: inline-block;
    width: 38px;
    height: 31px;
    background-position: 0 -1588px;
  }
  .btn-iii {
    // background-position: right -1020px;
    i {
      background-position: 0 -977px;
    }
  }
  .btn-iiii {
    i {
      background-position: 0 -1225px;
    }
  }
  .btn-iiiii {
    i {
      background-position: 0 -2761px;
    }
  }
  .btn-iiiiii {
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    width: 67px;
    cursor: pointer;
    background-position: right -1019px;
    margin-right: 10px;
    i {
      font-size: 12px;
      //   color: #000;
      display: inline-block;
      width: 64px;
      height: 31px;
      text-align: right;
      line-height: 31px;
      min-width: 23px;
      cursor: pointer;
      background-position: 0 -1465px;
      font-style: normal;
    }
  }
}

// 六个标签要用的公共样式
.u-btn-i {
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  width: 60px;
  cursor: pointer;
  background-position: right -1019px;
  margin-right: 10px;
}
// 六个图标要用的i样式
.u-btn {
  font-size: 12px;
  //   color: #000;
  display: inline-block;
  width: 56px;
  height: 31px;
  text-align: right;
  line-height: 31px;
  min-width: 23px;
  cursor: pointer;
  font-style: normal;
}
</style>
